<template>
  <div class="dialogWrapper">
    <el-dialog
      title="任务详情"
      v-if="visible"
      top="5vh"
      :visible.sync="visible"
      width="1238px"
      :before-close="handleClose"
    >
      <div class="mainWrapper">
        <div class="leftMenu">
          <el-menu
            :default-active="defaultActive"
            :collapse="false"
            @select="handleMenuChange"
          >
            <el-menu-item
              v-for="item in taskList"
              :key="item.value"
              :index="item.value"
              >{{ item.title }}</el-menu-item
            >
          </el-menu>
        </div>
        <div class="rightContent">
          <keep-alive>
            <component :is="comName" :selectedRow="selectedRow"></component>
          </keep-alive>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TaskDetailDialog",
  components: {
    Disc: () => import("./Disc.vue"),
    // ConsultantSummary: () => import("./ConsultantSummary.vue"),
    CareerPathReport: () => import("./CareerPathReport.vue"),
    CareerAssessment: () => import("./CareerAssessment.vue"),
    CareerReport: () => import("./CareerReport.vue"),
    ResumeDiagnosis: () => import("./ResumeDiagnosis.vue"),
    InterviewTraining: () => import("./InterviewTraining.vue"),
    CompetitiveAnalysis: () => import("./CompetitiveAnalysis.vue"),
    AIinterview: () => import("./AIinterview.vue"),
    JobOpportunity: () => import("./JobOpportunity.vue"),
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedRow: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      comName: "Disc", // TODO:
      AppKey: sessionStorage.getItem("AppKey"),
      // 通用任务列表
      NormalTaskList: [
        { title: "性格测评", value: "1" },
        { title: "职业测评", value: "2" },
        { title: "职业报告", value: "3" },
        { title: "简历诊断", value: "4" },
        { title: "顾问咨询", value: "5" },
        { title: "职途报告", value: "8" },
        { title: "AI面评", value: "9" },
        { title: "职业机会", value: "10" },
      ],
      // 深职大任务列表
      ShenZhiDaTaskList: [
        { title: "性格测评", value: "1" },
        { title: "职业测评", value: "2" },
        { title: "职业报告", value: "3" },
        { title: "简历诊断", value: "4" },
        { title: "面试辅导", value: "6" },
        { title: "竞争力分析", value: "7" },
        { title: "职途报告", value: "8" },
      ],
      taskList: [],
      defaultActive: "1",
      selectedMenuIndex: "1",
    };
  },
  watch: {
    selectedRow: {
      handler(val) {
        console.log(val);
        if (val?.cardType == 1) {
          this.taskList = this.ShenZhiDaTaskList;
        } else {
          this.taskList = this.NormalTaskList;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // 如果是深职业大，就显示特殊化的菜单
    // if (this.AppKey === "3799d8973c277cc6") {
    //   this.taskList = this.ShenZhiDaTaskList;
    // } else {
    //   this.taskList = this.NormalTaskList;
    // }
  },
  mounted() {
    this.selectedMenuIndex = "1";
  },
  methods: {
    handleMenuChange(val) {
      this.selectedMenuIndex = val;
      switch (val) {
        case "1":
          this.comName = "Disc";
          break;
        case "2":
          this.comName = "CareerAssessment";
          break;
        case "3":
          this.comName = "CareerReport";
          break;
        case "4":
          this.comName = "ResumeDiagnosis";
          break;
        case "5":
          this.comName = "ConsultantSummary";
          break;
        case "6":
          this.comName = "InterviewTraining";
          break;
        case "7":
          this.comName = "CompetitiveAnalysis";
          break;
        case "8":
          this.comName = "CareerPathReport";
          break;
        case "9":
          this.comName = "AIinterview";
          break;
        case "10":
          this.comName = "JobOpportunity";
          break;
        default:
          break;
      }
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogWrapper {
  .mainWrapper {
    display: flex;
    height: 638px;
    .leftMenu {
      background: #f0f2f5;
    }

    .rightContent {
      flex: 1;
      padding: 21px 0px 17px 21px;
      flex: 1;
      background: url("../../../assets/images/taskDetailBg@3x.png") no-repeat;
      // background-position: center;
      background-size: 101% 35%;
    }
  }
}

::v-deep .el-dialog__body {
  padding: 0 !important;
  border-radius: 0px 8px 8px 0px;
}

::v-deep .el-menu {
  width: 145px;
  border-right: 0px;
  background: #f0f2f5;
}

::v-deep .el-menu-item {
  position: relative;
  padding-left: 26px !important;
  padding: 0;
  min-width: 145px;
  height: 41px;
  line-height: 41px;
  color: #8892a6;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}

::v-deep .el-menu-item.is-active {
  color: #fff;
  padding-left: 9px !important;
  margin-left: 12px;
  background: #7052ff;
  border-radius: 8px;
  min-width: 133px;
  font-weight: 400;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #7052ff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
    z-index: 100;
  }
}
</style>
